<template>
  <div class="page">
    <div class="pc-tool">
      <el-tooltip
          :offset="22"
          :show-arrow="false"
          popper-class="tool-tooltip"
          effect="light"
          placement="right"
          content="Home">
        <div class="tool-icon home"></div>
      </el-tooltip>
      <div class="tool-line"></div>
      <el-tooltip :offset="22"
                  :show-arrow="false"
                  popper-class="tool-tooltip"
                  effect="light"
                  placement="right"
                  content="NEW chat">
        <div class="tool-icon new-chat"></div>
      </el-tooltip>
      <el-tooltip  :offset="22"
                   :show-arrow="false"
                   popper-class="tool-tooltip"
                   effect="light"
                   placement="right"
                   content="History">
        <div class="tool-icon history"></div>
      </el-tooltip>
      <div class="tool-line"></div>
      <el-tooltip  :offset="22"
                   :show-arrow="false"
                   popper-class="tool-tooltip"
                   effect="light"
                   placement="right"
                   content="Business">
        <div class="tool-icon business"></div>
      </el-tooltip>
      <el-tooltip  :offset="22"
                   :show-arrow="false"
                   popper-class="tool-tooltip"
                   effect="light"
                   placement="right"
                   content="News">
        <div class="tool-icon news"></div>
      </el-tooltip>
    </div>
    <div class="chat">
      <el-drawer
          v-model="drawer"
          direction="ltr"
          size="229px"
      >
        <div class="f-c">
          <div class="header">
            <el-icon color="#000" size="24" @click="drawer = false"><Close /></el-icon>
          </div>
          <div class="chat-add-button" @click="addChatItem">
            <img src="@/assets/new-chat.png" style="width: 14px;height: 14px" alt="">
            <span style="margin-left: 6px">New chat</span>
          </div>
          <div class="chat-list">
            <div :class="['chat-item f-r a-c', activeChat.id === item.id ? 'active' : '']" v-for="item in chatList">
              <div class="chat-item-left f-r a-c f-g" @click="clickChat(item)">
                <img class="active" src="@/assets/消息选中.png" alt="" style="margin-top: 0;">
                <img class="inactive" src="@/assets/消息未选中.png" alt="" style="margin-top: 0;">
                <span style="padding-left: 6px">{{ item.name }}</span>
              </div>
              <el-dropdown class="f-s" trigger="click" placement="bottom-end"  @command="command => clickChatItem(command, item)">
                <div class="f-s more-btn f-r a-c j-c">
                  <el-icon size="16" color="#475467"><MoreFilled /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="Rename">Rename</el-dropdown-item>
                    <el-dropdown-item command="Delete">Delete</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-drawer>
      <div class="chat-box f-g f-r">
        <div class="chat-content-wrapper f-g f-c a-c">
          <div class="header f-s j-c a-c">
            <img src="@/assets/category.png" style="width: 24px;height: 24px" alt="" @click="drawer = true">
            <div class="active-name">{{ activeChat.name }}</div>
          </div>
          <div class="chat-header-logo">
            <img style="width: 480px;margin-top: 32px" src="@/assets/news/header_logo.jpg" alt="">
          </div>
          <div class="content-box f-g f-r j-c" id="contentBox">
            <div class="content">
              <div class="message-item" v-if="activeChat.type">
                <div class="friend">
                  <div class="avatar">
                    <img src="@/assets/对话框头像.png" alt="">
                  </div>
                  <div class="message friend-message">
                    Hi there, I am going to ask you just a few questions to find the best gift for you!
                    <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="friend-message-border" data-icon="AnswerTriangle" aria-hidden="true"><path id="Rectangle 1" d="M1.03647 1.5547C0.59343 0.890144 1.06982 0 1.86852 0H8V12L1.03647 1.5547Z" fill="currentColor"></path></svg>
                  </div>
                  <div class="avatar">
                  </div>
                </div>
              </div>
              <div class="message-item" v-for="item in messageListShow" :key="item.id">
                <template v-if="item.mode === 'chat'">
                  <div class="my">
                    <div class="avatar my-avatar">
                    </div>
                    <div class="message member-message">
                      <span>{{ item.query }}</span>
                      <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="member-message-border" data-icon="QuestionTriangle" aria-hidden="true"><g id="Rectangle 2"><path d="M6.96353 1.5547C7.40657 0.890144 6.93018 0 6.13148 0H0V12L6.96353 1.5547Z" fill="currentColor"></path><path d="M6.96353 1.5547C7.40657 0.890144 6.93018 0 6.13148 0H0V12L6.96353 1.5547Z" fill="currentColor" fill-opacity="0.5"></path></g></svg>
                    </div>
                    <div class="avatar">
                      <img src="@/assets/对话框默认头像.png" alt="">
                    </div>
                  </div>
                  <div class="friend">
                    <div class="avatar">
                      <img src="@/assets/对话框头像.png" alt="">
                    </div>
                    <div class="message friend-message">
                      <img style="width: 77px;height: 40px;position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)" src="@/assets/chat_loading.gif" v-if="!item.answer" alt="">
                      <MarkdownRenderer class="markdown-body" :content="item.answer"></MarkdownRenderer>
                      <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="friend-message-border" data-icon="AnswerTriangle" aria-hidden="true"><path id="Rectangle 1" d="M1.03647 1.5547C0.59343 0.890144 1.06982 0 1.86852 0H8V12L1.03647 1.5547Z" fill="currentColor"></path></svg>
                    </div>
                    <div class="avatar">
                    </div>
                  </div>
                </template>
                <template v-if="item.mode === 'line'">
                  <div class="question-title message-line" style="margin-top: 8px">
                    <div class="question-line question-line-start"></div>
                    <div class="question">{{ item.message }}</div>
                    <div class="question-line question-line-end"></div>
                  </div>
                </template>
                <template v-if="item.mode === 'swiper'">
                  <div class="swiper-list">
                    <div
                        :class="['swiper-item', qItem.active ? 'active' : '']" v-for="qItem in item.list">
                      <img src="@/assets/logo2.png" style="width: 160px;height: 200px" alt="">
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="content f-s">
            <div class="message-item" v-if="questionList.length">
              <div class="question-title">
                <div class="question-line question-line-start"></div>
                <div class="question f-r a-c">
                  <img style="width: 11px;height: 10px" src="@/assets/try.png" alt="">
                  <span style="margin-left: 3px">Try to ask</span>
                </div>
                <div class="question-line question-line-end"></div>
              </div>
              <div style="display: flex;justify-content: center">
                <div class="question-list">
                  <div
                      v-for="qItem in questionList"
                      @click="clickQuestion(qItem)"
                      :class="['question-item', qItem.active ? 'active' : '']" >
                    {{ qItem.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer f-s">
            <div :class="['input-box', isFocus ? 'focus' : '']">
              <el-input
                  @input="changeMessage"
                  type="textarea" autosize :rows="5" @focus="isFocus = true; setScroll()" @blur="isFocus = false" v-model="message" placeholder="Please enter your question" clearable @keydown.enter="sendMessage"></el-input>
              <div :class="['right-box', message ? '' : 'empty-message']">
                <div class="static">{{ message.length }}</div>
                <img class="clear-icon" v-if="message" src="@/assets/clear.png" alt="" @click="message = ''">
                <div class="d-line"></div>
                <div :class="['send-icon']" @click="sendMessage">
                  <img v-show="message" src="@/assets/发送.png" alt="">
                  <img v-show="!message" src="@/assets/待发送.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="full-modal" v-if="chatItemDialog">
    <div class="full-modal-box f-r a-c j-c">
      <div class="modal-panel">
        <h3>Rename Conversation</h3>
        <div class="sub-title">Conversation name</div>
        <el-input class="input-box" v-model="chatItemEdit.name" placeholder="Please input conversation name"></el-input>
        <div class="modal-button">
          <el-row :gutter="16">
            <el-col :span="12">
              <el-button type="primary" @click="confirmChatName">Save</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" plain @click="chatItemDialog = false">Cancel</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
  <div class="full-modal delete-modal" v-if="chatItemDeleteDialog">
    <div class="full-modal-box f-r a-c j-c">
      <div class="modal-panel">
        <div class="f-r a-c j-c">
          <img src="@/assets/异常.png" style="width: 24px;height: 24px;margin-right: 8px" alt="">
          <h3 style="font-size: 18px">Delete conversation</h3>
        </div>
        <div class="sub-title2">Are you sure you want to delete this conversation？</div>
        <div class="modal-button">
          <el-row :gutter="16">
            <el-col :span="12">
              <el-button type="primary" @click="confirmChatDelete">Confirm</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" plain @click="chatItemDeleteDialog = false">Cancel</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
import { fetchEventSource } from '@microsoft/fetch-event-source';
const API_URL = 'https://dify.cozebuy.com/v1'
const HEADERS = {
  'Authorization': 'Bearer app-VyXYaBErhhMaEEaVJ7qQ2qBT',
  'Content-Type': 'application/json'
}
import {computed, nextTick, onMounted, ref} from "vue";

import axios from "axios";

import { useStore } from "vuex";
import {http} from "@/api";
import {dayjs, ElMessage} from "element-plus";
import {Close, MoreFilled} from "@element-plus/icons-vue";
const store = useStore();
// 设置滚动条
const setScroll = () => {
  nextTick(() => {
    const contentBox = document.getElementById('contentBox')
    contentBox.scrollTop = contentBox.scrollHeight
  })
}
/**
 * 会话列表
 *
 */
const chatList = ref([
])
const activeChat = ref({
})
const clickChat = (item) => {
  if (activeChat.value.id === item.id) return
  if (item.type === 'new') {
    activeChat.value = item
    messageList.value = []
    return
  };
  activeChat.value = item
  getMessageList()
}
const chatItemDialog = ref(false)
const chatItemDeleteDialog = ref(false)
const chatItemEdit = ref({})
const addChatItem = () => {
  let findEmptyChat = chatList.value.find(item => item.type === 'new')
  let defaultEmptyChat = {
    id: new Date().getTime(),
    type: 'new',
    name: 'New conversation'
  }
  if (findEmptyChat) {
    activeChat.value = findEmptyChat
  } else {
    chatList.value.unshift(defaultEmptyChat)
    activeChat.value = defaultEmptyChat
  }
  messageList.value = []
}
const confirmChatName = () => {
  chatItemDialog.value = false
  renameChatItem()
}
const clickChatItem = (item, chatItem) => {
  chatItemEdit.value = {
    ...chatItem
  }
  console.log(item)
  if (item === 'Rename') {
    chatItemDialog.value = true
  } else if (item === 'Delete') {
    chatItemDeleteDialog.value = true
  }
}
const confirmChatDelete = () => {
  deleteChatItem()
  chatItemDeleteDialog.value = false
}
/**
 * 消息
 */
const questionList = ref([

])
const messageList = ref([

])
const messageListShow = computed(() => {
  // 整个消息列表需要进行时间计算分组，与当前时间对比超过24点，显示日期时间，所有消息之间的间隔超过10分钟，需要显示时间
  let list = []
  let lastTime = 0
  // 数据是倒叙的
  let newList = messageList.value
  newList.forEach((item,index) => {
    let created_at = item.created_at * 1000 || new Date().getTime()
    let message = ''

    if (index === 0 || created_at - lastTime >= 60 * 1000 * 10) {
      // 今年之前显示年月日时分，今年显示月日时分，今天显示时分
      if (dayjs(created_at).format('YYYY') === dayjs().format('YYYY')) {
        if (dayjs(created_at).format('MM-DD') !== dayjs().format('MM-DD')) {
          message = dayjs(created_at).format('MM-DD HH:mm')
        } else {
          message = dayjs(created_at).format('HH:mm')
        }
      } else {
        console.log('+++++')
        message = dayjs(created_at).format('YYYY-MM-DD HH:mm')
      }
    }
    if (message) {
      list.push({
        mode: 'line',
        message
      })
    }
    lastTime = created_at
    list.push(item)
  })
  console.log('list',list)
  return list
})
const message = ref('')
const isFocus = ref(false)
const clickQuestion = (qItem) => {
  qItem.active = true
  message.value = qItem.name
  questionList.value = []
  sendMessage()
}
const sendMessage = () => {
  message.value = message.value.trimStart()
  if (!message.value) return
  sendChatMessage()
}
const changeMessage = () => {
  message.value = message.value.trimStart()
  setScroll()
}
const drawer = ref(false)

const getChatList = () => {
  axios({
    url: API_URL + '/conversations',
    params: {
      limit: 100,
      user: store.getters.token
    },
    method: 'get',
    headers: HEADERS
  }).then(res => {
    let emptyChat = chatList.value.find(item => item.type === 'new')
    if (!res.data.data.length) {
      activeChat.value = {}
      chatList.value = []
      messageList.value = []
      chatItemEdit.value = {}
      message.value = ''
      if (emptyChat) {
        activeChat.value = {
          ...emptyChat
        }
        chatList.value.unshift({
          ...emptyChat
        })
      } else {
        emptyChat = {
          id: new Date().getTime(),
          type: 'new',
          name: 'New conversation'
        }
        chatList.value.unshift({
          ...emptyChat
        })
        activeChat.value = {
          ...emptyChat
        }
      }
      return
    }
    chatList.value = res.data.data
    if (emptyChat) {
      chatList.value.unshift({
        ...emptyChat
      })
    }
    if (!activeChat.value.id) {
      activeChat.value = res.data.data[0]
      if (activeChat.value.type === 'new') {
        return
      }
      getMessageList()
    } else {
      let chat = res.data.data.find(item => item.id === activeChat.value.id)
      if (!chat) {
        activeChat.value = res.data.data[0]
        if (activeChat.value.type === 'new') {
          return
        }
        getMessageList()
      } else {
        activeChat.value = chat
      }
    }
  })
}
const deleteChatItem = () => {
  axios({
    url: API_URL + '/conversations/' + chatItemEdit.value.id,
    method: 'delete',
    data: {
      user: store.getters.token
    },
    headers: HEADERS
  }).then(res => {
    ElMessage.success('Delete success')
    getChatList()
  })
}
const renameChatItem = (auto_generate = false, isHandle = true) => {
  let data = {
    user: store.getters.token
  }
  if (auto_generate) {
    data.auto_generate = true
  } else {
    data.name = chatItemEdit.value.name
  }
  axios({
    url: `${API_URL}/conversations/${chatItemEdit.value.id}/name`,
    data,
    method: 'post',
    headers: HEADERS
  }).then(res => {
    if (isHandle) {
      ElMessage.success('Rename success')
    }
    getChatList()
  })
}
const getMessageList = () => {
  if (activeChat.value.type === 'new') {
    return
  }
  axios({
    url: `${API_URL}/messages`,
    params: {
      conversation_id: activeChat.value.id,
      user: store.getters.token,
      limit: 20,
    },
    method: 'get',
    headers: HEADERS
  }).then(res => {
    messageList.value = [
        ...res.data.data.map(item => {
          return {
            ...item,
            mode: 'chat'
          }
        })
    ]
    console.log(messageList.value)
    if (messageList.value.length) {
      getQuestionList(messageList.value[messageList.value.length - 1].id)
    }
    setScroll()
    console.log('messageList',messageList.value)
  })
}
const getQuestionList = (message_id) => {
  axios({
    url: `${API_URL}/messages/${message_id}/suggested`,
    params: {
      user: store.getters.token
    },
    method: 'get',
    headers: HEADERS
  }).then(res => {
    console.log(res)
    questionList.value = res.data.data.map(item => {
      return {
        id: item,
        name: item
      }
    })
    setScroll()
  })
}
// fetchChatMessage
async function fetchChatMessage(request, callback, closeCallback) {
  await fetchEventSource(request.url, {
    ...request,
    url: undefined,
    async onopen(response) {
    },
    onmessage(msg) {
      console.log('msg')
      const data = JSON.parse(msg.data)
      callback(data)
    },
    onclose() {
      console.log('onclose')
      closeCallback()
    },
    onerror(err) {
      console.log(err, 'onerror')
    }
  });
}

const sendChatMessage = () => {
  const item = {
    "query": message.value,
    "event": "message",
    "task_id": "",
    "id": "",
    "message_id": "",
    "conversation_id": "",
    "mode": "chat",
    "answer": "",
    "created_at": 0,
  }
  message.value = ''
  setTimeout(() => {
    message.value = message.value.trimStart()
  },300)
  messageList.value.push(item)
  const index = messageList.value.length - 1
  setScroll()
  const requestData = {
    url: `${API_URL}/chat-messages`,
    body: JSON.stringify({
      query: item.query,
      inputs: {},
      user: store.getters.token,
      response_mode: 'streaming',
      conversation_id: activeChat.value.type === 'new' ? undefined :activeChat.value.id
    }),
    openWhenHidden: true,
    responseType: 'stream',
    method: 'POST',
    headers: HEADERS
  }
  function callback(data) {
    const { conversation_id, message_id, event = '' } = data
    console.log('event',event)
    // 新的会话 重命名
    if(activeChat.value.type === 'new') {
      chatList.value.forEach(_item => {
        if (_item.id === activeChat.value.id) {
          _item.type = null
          _item.id = conversation_id
          chatItemEdit.value = {
            ..._item
          }
        }
      })
      activeChat.value.id = conversation_id
      activeChat.value.type = null
      renameChatItem(true, false)
    }
    if (event === 'agent_message') {
      messageList.value[index].answer += data.answer
      if (!messageList.value[index].id) {
        messageList.value[index].id = message_id
        messageList.value[index].conversation_id = conversation_id
        messageList.value[index].message_id = message_id
        messageList.value[index].created_at = data.created_at
        messageList.value[index].task_id = data.task_id
      }
      setScroll()
    }
  }
  function closeCallback() {
    http.saveMessage({
      ...messageList.value[index],
      user: store.getters.token
    })
    getQuestionList(messageList.value[index].message_id)
  }
  fetchChatMessage(requestData, callback, closeCallback)
}

onMounted(() => {
  getChatList()
  // 创建用户
  http.createUser({
    user: store.getters.token
  })
  // contentBox 滚动至最上方时触发接口请求
  const contentBox = document.getElementById('contentBox')
  contentBox.addEventListener('scroll', function () {
    if (contentBox.scrollTop === 0) {
      console.log('scroll')
      if (messageList.value.length  && activeChat.value.type !== 'new') {
        axios({
          url: `${API_URL}/messages`,
          params: {
            conversation_id: activeChat.value.id,
            user: store.getters.token,
            limit: 20,
            first_id: messageList.value[0].id
          },
          method: 'get',
          headers: HEADERS
        }).then(res => {
          messageList.value = [
              ...res.data.data.map(item => {
                return {
                  ...item,
                  mode: 'chat'
                }
              }),
              ...messageList.value
          ]
        })
      }
    }
  })
})
</script>
<style lang="scss">
.page {
  position: relative;
  height: 100%;
  .question-title.message-line {
    margin-bottom: 0 !important;
    margin-top: 20px !important;
  }
  .el-textarea__inner {
    box-shadow: none;
    resize: none;
    max-height: 150px;
    padding: 0;
    padding-right: 115px;
    color: #000000;
  }
  .el-input__inner {
    color: #000000;
  }
  .right-box {
    position: absolute;
    right: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    bottom: 0px;
    height: 48px;
    .clear-icon {
      margin-left: 12px;
    }
    img {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
    .static {
      color: rgb(102, 112, 133);
      background-color: rgb(242, 244, 247);
      padding: 0 4px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      border-radius: 6px;
    }
  }
}
.full-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  .full-modal-box {
    padding: 16px;
    width: 100%;
    height: 100%;
  }
  .modal-panel {
    width: 100%;
    max-width: 448px;
    border-radius: 16px;
    padding:30px 24px;
    text-align: left;
    vertical-align: middle;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    background-color: #ffffff;
    h3 {
      font-size: 18px;
      color: #101828;
      text-align: center;
    }
    .sub-title {
      font-size: 14px;
      margin-top: 24px;
      color: #101828;
      margin-bottom: 8px;
    }
    .sub-title2 {
      opacity: 0.5;
      font-size: 16px;
      color: #000000;
      line-height: 26px;
      font-weight: 400;
      margin-top: 24px;
    }
    .input-box {
      background: #FFFFFF;
      height: 40px;
      display: flex;
      align-items: center;
      position: relative;
      .el-input__wrapper {
        border-radius: 8px;
      }
      &.focus {
        border-color: var(--primary-color);
      }
      input::placeholder {
        opacity: 0.5;
        font-family: Arial;
        font-size: 16px;
        color: #000000;
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 400;
      }
      .el-input__inner {
        font-family: Arial;
        font-size: 16px;
        color: #000000;
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 400;
      }
    }

  }
  .modal-button {
    margin-top: 24px;
    width: 100%;
    .el-button {
      width: 100%;
    }
  }
}
.chat-box {
  overflow: hidden;
}
.chat {
  border-radius: 8px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-image: url("~@/assets/news/网页背景页.png");
  background-size: cover;
  .el-drawer__header {
    display: none;
  }
  .el-drawer__body {
    padding: 0;
  }
  .chat-list {
    flex-grow: 1;
    overflow: auto;
    .chat-item {
      cursor: pointer;
      margin: 2px 16px;
      display: flex;
      padding: 7px 14px;
      opacity: 0.53;
      font-size: 14px;
      color: #000000;
      letter-spacing: 0;
      line-height: 21px;
      font-weight: 400;
      border-radius: 8px;
      .el-icon {
        margin-top: 3px;
      }
      .inactive {
        display: initial;
      }
      .active {
        display: none;
      }
      &:hover,
      &.active {
        background: #F2F4F7;
        opacity: 1;
        color: #4F4EF1;
        .active {
          display: initial;
        }
        .inactive {
          display: none;
        }
      }
      .chat-item-left {
        overflow: hidden;
        img {
          width: 14px;
          height: 14px;
          margin-top: 3px;
        }

        //overflow: hidden;
        span {
          // 溢出省略号
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .more-btn {
      background-color: rgb(239 244 255);
      width: 24px;
      height: 24px;
      border-radius: 6px;
    }
  }
  .footer {
    width: 100%;
    max-width: 880px;
    flex-shrink: 0;
    padding: 24px 20px 80px 20px;
    .d-line {
      height: 18px;
      width: 1px;
      background-color: #000000;
      opacity: 0.3;
      margin: 0 12px;
    }
    .send-icon {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .input-box {
      background: #FFFFFF;
      border: 0.5px solid rgba(178,178,178,1);
      box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.04);
      border-radius: 8px;
      min-height: 48px;
      display: flex;
      align-items: center;
      position: relative;
      padding: 5px 5px 5px 10px;
      &.focus {
        border-color: var(--primary-color);
      }
      input::placeholder {
        opacity: 0.5;
        font-family: Arial;
        font-size: 16px;
        color: #000000;
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 400;
      }
      .el-input__inner {
        font-family: Arial;
        font-size: 16px;
        color: #000000;
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 400;
      }
      .el-input__clear {
        width: 16px;
        height: 16px;
      }
      .el-input__wrapper {
        box-shadow: none;
        border-radius: 8px;
      }
    }
  }
  .content {
    width: 100%;
    max-width: 880px;
    .swiper-list {
      margin: 20px;
      overflow: auto;
      display: flex;
      align-items: center;
      .swiper-item {
        border-radius: 4px;
        margin-right: 12px;
      }
    }
    .question-title {
      display: flex;
      align-items: center;
      margin: 20px 0;
      padding: 0 20px;
      margin-bottom: 8px;

      .question-line {
        flex-grow: 1;
        height: 1px;
      }
      .question-line-start {
        background: linear-gradient(270deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, 0) 100%);
      }
      .question-line-end {
        background: linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, rgb(243, 244, 246) 100%);
      }
      .date-line {
        background: linear-gradient(270deg, rgb(235, 235, 239) 0%, rgba(243, 244, 246, 0) 100%);
      }
      .question {
        flex-shrink: 0;
        font-family: Arial;
        font-size: 10px;
        color: #667085;
        letter-spacing: 0;
        font-weight: 400;
        padding: 0 12px;
      }
    }
    .question-list {
      padding: 0 20px;
      display: flex;
      flex-wrap: wrap;
      max-width: 880px;
      .question-item {
        border: 0.5px solid rgba(191,191,191,1);
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 12px;
        color: #000000;
        letter-spacing: 0;
        font-weight: 400;
        cursor: pointer;
        margin: 12px 6px 0 0;
        &:hover,
        &.active {
          background:rgba(79,78,241,0.1);
          border: 0.5px solid rgba(79,78,241,0.1);
        }
      }
    }
    .friend {
      display: flex;
      gap: 8px;
      padding:24px 20px;
      padding-bottom:0;
    }
    .my {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      padding:24px 20px;
      padding-bottom: 0;
    }
    .avatar {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .message {
      max-width: 100%;
      //white-space: pre-wrap !important;
      //word-break: break-word !important;
      font-size: 16px;
      line-height: 19px;
      margin: 0;
      letter-spacing: .25px;
      padding: 12px 16px;
      border-radius: 8px;
      font-weight: 400;
      font-family: Arial;
      word-wrap: break-word;
      word-break: break-word;
    }
    .friend-message {
      background-color: #F2F4F7;
      position: relative;
      border-top-left-radius: 0;
      margin-left: 12px;
      min-width: 77px;
      .friend-message-border {
        position: absolute;
        color: #F2F4F7;
        top: 0;
        left: -7px;
      }
    }
    .member-message {
      background-color: #4F4EF1;
      color: #ffffff;
      position: relative;
      border-top-right-radius: 0;
      margin-right: 12px;
      .member-message-border {
        position: absolute;
        top: 0;
        right: -7px;
        color: #4F4EF1;
      }
    }
  }
  .header {
    width: 100%;
    height: 57px;
    align-items: center;
    padding: 0 64px 0 64px;
    display: flex;
    position: relative;
    img {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: none;
    }
    .active-name {
      font-size: 16px;
      color: #000000;
      letter-spacing: 0;
      line-height: 24px;
      font-weight: 400;
      margin-left: 8px;
      // 两行省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .chat-content-wrapper {
    overflow: hidden;
    //background-image: url("~@/assets/h5_bg.png");
    //background-repeat: no-repeat;
    //background-size: 100% 100%;
    .content-box {
      width: 100%;
      overflow: auto;
    }
  }
}
.tool-tooltip.el-popper.is-light {
  border: none;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 15px 48px 0 rgba(16,16,16,0.06);
  width: 112px;
  height: 38px;
  padding: 0;
  line-height: 38px;
  font-size: 16px;
  color: #000000;
  text-align: center;
  font-family: PingFangSC-Regular;
}
.pc-tool {
  width: 60px;
  background: #FAFBFF;
  border-radius: 8px;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 36px 0 20px 0;
  transition: all .3s ease;
  box-shadow: 2px 2px 7.7px 0px rgba(146, 159, 202, 0.19), 0px 0px 1px 1px rgba(255, 255, 255, 0.45) inset;
  .tool-icon {
    width: 32px;
    height: 32px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-bottom: 16px;
    &.home {
      background-image: url("~@/assets/news/web-home.png");
    }
    &.new-chat {
      background-image: url("~@/assets/news/new_chat.png");
      &:hover {
        background-image: url("~@/assets/news/new_chat_active.png");
      }
    }
    &.history {
      background-image: url("~@/assets/news/history.png");
      &:hover {
        background-image: url("~@/assets/news/history_active.png");
      }
    }
    &.business {
      background-image: url("~@/assets/news/business.png");
      &:hover {
        background-image: url("~@/assets/news/business_active.png");
      }
    }
    &.news {
      background-image: url("~@/assets/news/news.png");
      &:hover {
        background-image: url("~@/assets/news/news_active.png");
      }
    }
  }
  .tool-line {
    width: 24px;
    height: 1px;
    background-color: #E5E5E5;
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
  }
}
@media (max-width: 880px) {
  .page {
    padding: 0;
    .question-list {
      max-width: initial;
      width: 100% !important;
    }
  }
  .chat {
    border-radius: 0;
    .content .question-list {
      padding: 0 20px;
    }
    .el-drawer__body {
      .header {
        padding-left: 20px;
      }
      .chat-add-button {
        margin: 0 16px 12px;
      }
    }
    .header {
      img {
        display: initial;
      }
    }
    .content-box {
      .content {
        padding: 0
      }
    }
    .content,
    .footer {
      padding: 24px 20px;
      padding-top: 0;
      max-width: initial;
    }
    .chat-item-wrapper {
      display: none;
    }
  }
  .right-box {
    .static {
      display: none;
    }
    &.empty-message {
      .d-line{
        display: none;
      }
    }
  }
  .page .el-textarea__inner {
    padding-right: 70px !important;
  }
}
</style>
